@inject IMessageService _message

<Upload Action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        Name="avatar"
        ShowUploadList="true"
        ShowDownloadIcon="true"
        ShowPreviewIcon="true"
        ShowRemoveIcon="true"
        @bind-FileList="fileList"
        ShowButton="fileList?.Count < 8"
        ListType="UploadListType.PictureCard"
        OnPreview="(file)=> {
                           Console.WriteLine(file.FileName);
                           Console.WriteLine(file.Url);
                           previewVisible = true;
                           previewTitle = file.FileName;
                           imgUrl = file.Url;
                       }"
        OnChange="HandleChange">
    <div>
        <Icon Type="@IconType.Outline.Plus" />
        <div className="ant-upload-text">Upload</div>
    </div>

</Upload>
<Modal Visible="previewVisible"
       Title="previewTitle"
       OnCancel="()=> previewVisible=false">
    <img style="width: 100%" src="@imgUrl" />
</Modal>

@code
{
    bool previewVisible = false;
    string previewTitle = string.Empty;
    string imgUrl = string.Empty;
    bool showUploadListOption1 = true;

    List<UploadFileItem> fileList = new List<UploadFileItem>
    {
        new UploadFileItem
        {
            Id = "1",
            FileName = "image.png",
            State = UploadState.Success,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        new UploadFileItem
        {
            Id = "2",
            FileName = "image.png",
            State = UploadState.Success,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        new UploadFileItem
        {
            Id = "3",
            FileName = "image.png",
            State = UploadState.Success,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        new UploadFileItem
        {
            Id = "4",
            FileName = "image.png",
            State = UploadState.Success,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
        new UploadFileItem
        {
            Id = "xxx",
            FileName = "image.png",
            State = UploadState.Uploading,
            Percent = 50,
            Url = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        },
         new UploadFileItem
        {
            Id = "5",
            FileName = "image.png",
            State = UploadState.Fail
        },
    };

    void HandleChange(UploadInfo fileinfo)
    {
        if (fileinfo.File.State == UploadState.Success)
        {
            fileinfo.File.Url = fileinfo.File.ObjectURL;
        }
    }

    public class ResponseModel
    {
        public string name { get; set; }

        public string status { get; set; }

        public string url { get; set; }

        public string thumbUrl { get; set; }
    }
}

<style>
    /* you can make up upload button and sample style by using stylesheets */
    .ant-upload-select-picture-card i {
        color: #999;
        font-size: 32px;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>